<template>
	<view>
		<u-navbar height="50" back-icon-color="#333" title="设置交易密码" title-color="#333" title-size="36">
		</u-navbar>
		<view class="contentView" v-if="current == 0">
			<view class="contentTitle">输入交易密码</view>
			<u-message-input :value="password" :breathe="false" :disabled-keyboard="true" :dot-fill="true"
				:maxlength="6" inactive-color="#333" active-color="#F6632D">
			</u-message-input>
		</view>
		<view class="contentView" v-else>
			<view class="contentTitle">再次输入交易密码</view>
			<u-message-input :value="password2" :breathe="false" :disabled-keyboard="true" :dot-fill="true"
				:maxlength="6" inactive-color="#333" active-color="#F6632D">
			</u-message-input>
		</view>
		<u-keyboard :z-index="100" v-model="keyboard" :dot-enabled="false" :tooltip="false" :mask="false"
			:mask-close-able="false" @change="onInput" @backspace="onBackspace"></u-keyboard>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyboard: true,
				current: 0,
				password: '',
				password2: ''
			}
		},
		methods: {
			onInput(value) {
				if (this.current == 0) {
					this.password += value;
					if (this.password.length < 6) {
						this.current = 0;
					} else {
						this.current = 1;
					}
				} else {
					this.password2 += value;
					if (this.password2.length >= 6) {
						this.setPassword();
					}
				}
			},
			onBackspace() {
				if (this.current == 0) {
					if (this.password.length) {
						this.password = this.password.substr(0, this.password.length - 1);
					}
				} else {
					if (this.password2.length) {
						this.password2 = this.password2.substr(0, this.password2.length - 1);
					}
				}
			},
			setPassword() {
				let self = this;
				self.$user.payPasswordSet({
					pin: this.password,
					pin_confirmation: this.password2
				}, true).then(res => {
					self.$utils.tips('设置成功')
					self.$utils.onTimeBack();
				}).catch(res => {
					self.current = 0;
					self.password = '';
					self.password2 = '';
				});
			}
		}
	}
</script>

<style>
	.contentView {
		display: flex;
		flex-direction: column;
	}

	.contentTitle {
		text-align: center;
		font-size: 60rpx;
		font-weight: 400;
		color: #313233;
		padding: 80rpx 0px;
	}
</style>
